<template>
	<view class="live-container">
		<view class="hd">
			<view class="back" @click="back">
				<image src="../../static/imgs/left.png" mode=""></image>
			</view>
			<view class="title">课程直播</view>
			<view class="share">
				<image src="../../static/imgs/details-share.png" mode=""></image>
			</view>
		</view>
		<!-- play -->
		<view class="play">
			<image src="../../static/imgs/live.png" mode="widthFix"></image>
			<view class="play-btn">
				<image src="../../static/imgs/live-play.png" mode=""></image>
			</view>
		</view>
		<div class="title">
			设计理念——用户增长思维和洞察数据
			做好产品体验设计
		</div>
		<view class="course">
			<text>授课：XXXXX</text>
			<image src="../../static/imgs/del.png" mode=""></image>
		</view>
		<view class="info">
			<view class="title">简介</view>
			<view class="content">
				互联网产品设计主要指通过用户研究和分析进行的整套服务体系和价值体系的设计过程，设计也分不同的方向，互联网产品在设计过程中分成多个阶段，每个阶段是不同的设计活动；本课程介绍了设计的几个方面，我们一起来看一下。
			</view>
		</view>
		<view class="comment">
			<view class="title">评论</view>
			<view class="comment-list" v-for="item in 5">
				<view class="list-left">
					<view class="avatar">

					</view>
				</view>
				<view class="list-right">
					<view class="name">ZhangRuoqi</view>
					<view class="time">2022.01.01</view>
					<view class="content">评论评论评论评论评论评论评论评论评论评论
						评论评论评论</view>
				</view>
			</view>
		</view>
		<view class="footer-btn">
			<view class="content">
				<u--input placeholder="你一定有很多想谈的" border="surround" shape="circle"></u--input>
				<view class="btn">
					<image src="../../static/imgs/publish.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		methods:{
			back(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.live-container {
		padding: 100rpx 60rpx;

		.hd {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.back {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				border: 1px solid #FFFFFF;
				box-shadow: 6rpx 10rpx 20rpx 2rpx rgba(151, 173, 225, 0.6);
				background: #F4F6F8;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 21rpx;
					height: 34rpx;
				}
			}

			.title {
				color: #3D5464;
				font-weight: 800;
				font-size: 40rpx;
			}

			.share {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				border: 1px solid #FFFFFF;
				box-shadow: 6rpx 10rpx 20rpx 2rpx rgba(151, 173, 225, 0.6);
				background: #F4F6F8;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 27rpx;
					height: 30rpx;
				}
			}
		}

		.play {
			position: relative;

			image {
				width: 100%;
			}

			.play-btn {
				position: absolute;
				top: 40%;
				left: 40%;
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				border: 1px solid #FFFFFF;
				box-shadow: 6rpx 10rpx 20rpx 2rpx rgba(151, 173, 225, 0.6);
				background: #3F7BED;
				text-align: center;
				line-height: 110rpx;

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}

		.title {
			color: #455372;
			font-weight: 400;
			font-size: 36rpx;
		}

		.course {
			display: flex;
			align-items: center;
			margin: 20rpx 0;

			text {
				color: #999FAD;
				font-weight: 400;
				font-size: 28rpx;
				margin-right: 20rpx;
			}

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}

		.info {
			.title {
				font-size: 28rpx;
				margin: 20rpx 0;
				color: #455372;
			}

			.content {
				color: #999FAD;
				font-size: 24rpx;
			}
		}

		.comment {
			margin-top: 40rpx;
			margin-bottom: 200rpx;
			.title {
				margin-bottom: 20rpx;
				color: #3D5464;
				font-weight: 800;
				font-size: 40rpx;
			}

			.comment-list {
				display: flex;
				margin-bottom: 40rpx;

				.list-left {
					.avatar {
						margin-right: 40rpx;
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						border: 1rpx solid #FFFFFF;
						box-shadow: 6rpx 10rpx 20rpx 2rpx rgba(151, 173, 225, 0.6);
						background: #3F7BED;
					}

				}

				.list-right {
					.name {
						color: #455372;
						font-weight: bold;
						font-size: 28rpx;
					}

					.time {

						color: #999FAD;
						font-size: 20rpx;
						margin-bottom: 20rpx;
					}

					.content {
						letter-spacing: 2rpx;
						color: #455372;
						font-size: 28rpx;
					}
				}
			}
		}

		.footer-btn {
			width: 100%;
			position: fixed;
			bottom: 0;
			right: 0;
			left: 0;
			border-top: 1px solid  #89B1F8;
			.content{
				background-color: #FFFFFF;
				display: flex;
				align-items: center;
				padding: 60rpx 20rpx;
				.btn {
					margin-left: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 60rpx;
					height: 60rpx;
					background: #3F7BED;
					border-radius: 50%;
					box-shadow: 6px 10px 20px 2px rgba(151, 173, 225, 0.6);
					image{
						width: 40rpx;
						height: 40rpx;
						
					}
				}
			}
			
		}
	}
</style>
